Vue2体验Vue3，Vue2.7升级指南 |
您所在的位置：网站首页 › vue2升级成vue3 卡顿 › Vue2体验Vue3，Vue2.7升级指南 |
Vue2体验Vue3，Vue2.7升级指南
|
北京时间7月1号，Vue2.7正式发布，代号Naruto，看过火影的人应该对这个代号不陌生。 Vue2.7支持你的项目在不升级Vue3的情况下使用Vue3的特性，例如Composition Api、setup、Css v-bind等。 与此同时，Vue2.7也是Vue2.X的最终次要版本，在这个版本之后，Vue2将进入LTS（长期支持），即从现在开始持续18个月，Vue2将不再接收新功能。 对于一些老项目来说，当升级Vue3成本过大而你又垂涎Vue3新的api和代码组织方式时，那Vue2.7无疑是最佳选择，这可以让还在使用Vue2的同学更好的学习并过渡到Vue3。 接下来笔者将以一个Vue2的项目，将其升级到Vue2.7并记录该过程，欢迎感兴趣的小伙伴阅读。 升级前版本：vue: 2.6.14，vue-cli: 4.0.0 一、删除node_modules和package-lock.json为了确保我们后面升级的依赖版本是正确的，在一开始时我们直接先将项目的node_modules和package-lock.josn删除，避免出现各种缓存问题。 二、升级过程 1. vue-cli脚手架升级现在我们先按照要求升级脚手架的版本，Vue2.7对于要求vue-cli版本要求如下： 如果你的vue-cli是v4版本的，那么你需要将其升级到~4.5.18 如果你的vue-cli是v5版本的，那么你需要将其升级到~5.0.6 // package.json { "devDependencies": { // "@vue/cli-plugin-babel": "^4.0.0", // "@vue/cli-plugin-eslint": "^4.0.0", // "@vue/cli-service": "^4.0.0", // 修改为 "@vue/cli-plugin-babel": "^4.5.18", "@vue/cli-plugin-eslint": "^4.5.18", "@vue/cli-service": "^4.5.18", } } 2. vue版本升级 // package.json { "dependencies": { // "vue": "2.6.14", "vue": "2.7.0", // vue2.7 不再需要vue-template-compoler，所以可以将其删除 // "vue-template-compiler": "2.6.14", } } 3. @vue/composition-api有些人可能已经在Vue2的项目使用上了@vue/composition-api，这时你需要将项目中所用到的导入更新为vue: // import { ref } from '@vue/composition-api' import { ref } from 'vue'但@vue/composition-api里的一些API，如createApp，并未完全在Vue2.7里移植，所以如果你用到了这些API，那还是使用继续使用@vue/composition-api，若你用到的API都是Vue2.7里有的，则可以将@vue/composition-api从依赖中删去了。 三、使用经过上面的改动后，现在可以重新安装依赖并运行起来了，接着就可以品尝Vue3的新写法了。 - {{ count }} + import { ref } from 'vue' let count = ref(1) const decrease = () => { count.value-- } const increase = () => { count.value++ }另外，Vue2.7支持在模板表达式中使用ESNext语法，这意味着可以在template里使用可选链了，以往在Vue2中，template里并不支持可选链写法，现在在Vue2.7里的template中则可以愉快的使用可选链了。 {{ userInfo?.name }} import { ref } from 'vue' let userInfo = ref(null) 四、eslint问题在上面的代码中，会出现Eslint未使用变量的错误提示。 解决这个问题我们需要将eslint-plugin-vue版本升级到9+。 npm i [email protected] -D 感谢本次分享到此结束，感谢您的阅读！！！ |
【本文地址】
今日新闻 |
推荐新闻 |